<template>
    <div class="my_fans">
      <!-- <div @click ='getlist'>点击获取list</div> -->
      <my-header :title="$t('lang.Myteam')"   :showBack="true" />
      <div>
        <div class="search_box ">
          <i class="icon-search iconfont"></i>
          <form action="">
            <input type="search" class="" :placeholder="$t('lang.serchNumber')"  @keypress="onKeySearch" v-model.trim="searchValue">
          </form>
          <span @click="onSearch">{{$t("lang.searchNtn")}}</span>
        </div>
        <div style="height:30px;margin-bottom: 10px;">
          <div style="padding: 5px 15px;color:#0258c2;" v-show="parentId"> 
            <span style="margin-right:10px;" @click="initFans(0)">{{$t("lang.BackTop")}}</span>
            <!-- <span @click="initFans(parentId)">上一层</span> -->
            <span @click="toUPFans(parName)">{{$t("lang.oneUpceng")}}</span>
          </div>
        </div>
        <div class="my_fans_tree">
          <div class="line_1"></div>
          <div class="line_2"></div>
          <div class="line_3"><span></span></div>
          <div class="line_4"><span></span></div>
          <ul>
            <li>
              <div class="info_box" @click="showPopup(list)">
                <span class="text_hide">{{list.customerName||'账号'}} {{list.levelName}}</span>
                <!-- <span class="text_hide">手机号：{{list.customerPhone||'手机号'}}</span> -->
                <span class="text_hide">{{$t("lang.Trname")}}：{{list.trueName||MemberNmme}}</span>
                <div class="pflex">
                  <p class="text_hide">{{$t("lang.ttotal")}}：{{list.leftTotalSale||'0'}}</p><p class="text_hide">{{$t("lang.ttotal")}}：{{list.rightTotalSale||'0'}}</p>
                </div>
                <div class="pflex">
                  <p class="text_hide">{{$t("lang.yu")}}：{{list.leftRemainSale||'0'}}</p><p class="text_hide">{{$t("lang.yu")}}：{{list.rightRemainSale||'0'}}</p>
                </div>
                <!-- <span class="text_hide">ID：{{list.customerNumber||'--'}}</span> -->
              </div>
            </li>
            <li>
              <div class="info_box" v-if="list1.customerName" @click="showPopup(list1)">
                <span class="text_hide col_red" v-if="list1.customerStatus!=4">{{list1.customerName}} {{list1.levelName}}</span>
                <span class="text_hide " v-if="list1.customerStatus==4">{{list1.customerName}} {{list1.levelName}}</span>
                <!-- <span class="text_hide">手机号：{{list1.customerPhone||'手机号'}}</span> -->
                <span class="text_hide">{{$t("lang.Trname")}}：{{list1.trueName||MemberNmme}}</span>
                <div class="pflex">
                  <p class="text_hide">{{$t("lang.ttotal")}}：{{list.leftTotalSale||'0'}}</p><p class="text_hide">{{$t("lang.ttotal")}}：{{list.rightTotalSale||'0'}}</p>
                </div>
                <div class="pflex">
                  <p class="text_hide">{{$t("lang.yu")}}：{{list.leftRemainSale||'0'}}</p><p class="text_hide">{{$t("lang.yu")}}：{{list.rightRemainSale||'0'}}</p>
                </div>
                <!-- <span class="text_hide">ID：{{list1.customerNumber||'--'}}</span>                 -->
              </div>
              <div class="info_box" v-else @click.stop="goRegister(1,list,list)">
                <section v-show="!list.customerName">{{$t("lang.leftSpace")}}</section>
                <section v-show="list.customerName">{{$t("lang.teamRegbtn")}}</section>
              </div>
            </li>
            <li>
              <div class="info_box" v-if="list2.customerName" @click="showPopup(list2)">
                <span class="text_hide col_red" v-if="list2.customerStatus!=4">{{list2.customerName}} {{list2.levelName}}</span>
                <span class="text_hide " v-if="list2.customerStatus==4">{{list2.customerName}} {{list2.levelName}}</span>

                <!-- <span class="text_hide">手机号：{{list2.customerPhone||'手机号'}}</span> -->
                <span class="text_hide">{{$t("lang.Trname")}}：{{list2.trueName||MemberNmme}}</span>
                <div class="pflex">
                  <p class="text_hide">{{$t("lang.ttotal")}}：{{list.leftTotalSale||'0'}}</p><p class="text_hide">{{$t("lang.ttotal")}}：{{list.rightTotalSale||'0'}}</p>
                </div>
                <div class="pflex">
                  <p class="text_hide">{{$t("lang.yu")}}：{{list.leftRemainSale||'0'}}</p><p class="text_hide">{{$t("lang.yu")}}：{{list.rightRemainSale||'0'}}</p>
                </div>
                <!-- <span class="text_hide">ID：{{list2.customerNumber||'--'}}</span> -->
              </div>
              <div class="info_box" v-else @click.stop="goRegister(2,list,list1)">
                <section v-show="!list.customerName">{{$t("lang.rightSpace")}}</section>
                <section v-show="list.customerName">
                  <i v-show="list1.customerName">{{$t("lang.teamRegbtn")}}</i>
                  <i v-show="!list1.customerName">{{$t("lang.rightSpace")}}</i>
                </section>
              </div>
            </li>
            <li>
              <div class="info_box" v-if="list3!= undefined" @click="showPopup(list3)">
                <span class="text_hide col_red" v-if="list3.customerStatus!=4">{{list3.customerName}} {{list3.levelName}}</span>
                <span class="text_hide " v-if="list3.customerStatus==4">{{list3.customerName}} {{list3.levelName}}</span>
                <!-- <span class="text_hide">手机号：{{list3.customerPhone||'手机号'}}</span> -->
                <span class="text_hide">{{$t("lang.Trname")}}：{{list3.trueName||MemberNmme}}</span>
                <div class="pflex">
                  <p class="text_hide">{{$t("lang.ttotal")}}：{{list.leftTotalSale||'0'}}</p><p class="text_hide">{{$t("lang.ttotal")}}：{{list.rightTotalSale||'0'}}</p>
                </div>
                <div class="pflex">
                  <p class="text_hide">{{$t("lang.yu")}}：{{list.leftRemainSale||'0'}}</p><p class="text_hide">{{$t("lang.yu")}}：{{list.rightRemainSale||'0'}}</p>
                </div>
                <!-- <span class="text_hide">ID：{{list3.customerNumber||'--'}}</span> -->
              </div>
              <div class="info_box" v-else @click.stop="goRegister(1,list1,list3)">
                <section v-show="!list1.customerName">{{$t("lang.leftSpace")}}</section>
                <section v-show="list1.customerName">{{$t("lang.teamRegbtn")}}</section>
              </div>
            </li>
            <li>
              <div class="info_box" v-if="list4 != undefined" @click="showPopup(list4)">
                <span class="text_hide col_red" v-if="list4.customerStatus!=4">{{list4.customerName}} {{list4.levelName}}</span>
                <span class="text_hide " v-if="list4.customerStatus==4">{{list4.customerName}} {{list4.levelName}}</span>
                <!-- <span class="text_hide">手机号：{{list4.customerPhone||'手机号'}}</span> -->
                <span class="text_hide">{{$t("lang.Trname")}}：{{list4.trueName||MemberNmme}}</span>
                <div class="pflex">
                  <p class="text_hide">{{$t("lang.ttotal")}}：{{list.leftTotalSale||'0'}}</p><p class="text_hide">{{$t("lang.ttotal")}}：{{list.rightTotalSale||'0'}}</p>
                </div>
                <div class="pflex">
                  <p class="text_hide">{{$t("lang.yu")}}：{{list.leftRemainSale||'0'}}</p><p class="text_hide">{{$t("lang.yu")}}：{{list.rightRemainSale||'0'}}</p>
                </div>
                <!-- <span class="text_hide">ID：{{list4.customerNumber||'--'}}</span> -->
              </div>
              <div class="info_box" v-else @click.stop="goRegister(2,list1,list3)">
                <section v-show="!list1.customerName">{{$t("lang.rightSpace")}}</section>
                <section v-show="list1.customerName">
                  <i v-show="list3">{{$t("lang.teamRegbtn")}}</i>
                  <i v-show="!list3">{{$t("lang.rightSpace")}}</i>
                </section>
              </div>
            </li>
            <li>
              <div class="info_box" v-if="list5.customerName" @click="showPopup(list5)">
                <span class="text_hide col_red" v-if="list5.customerStatus!=4">{{list5.customerName}} {{list5.levelName}}</span>
                <span class="text_hide " v-if="list5.customerStatus==4">{{list5.customerName}} {{list5.levelName}}</span>
                <!-- <span class="text_hide">手机号：{{list5.customerPhone||'手机号'}}</span> -->
                <span class="text_hide">{{$t("lang.Trname")}}：{{list5.trueName||MemberNmme}}</span>
                <div class="pflex">
                  <p class="text_hide">{{$t("lang.ttotal")}}：{{list.leftTotalSale||'0'}}</p><p class="text_hide">{{$t("lang.ttotal")}}：{{list.rightTotalSale||'0'}}</p>
                </div>
                <div class="pflex">
                  <p class="text_hide">{{$t("lang.yu")}}：{{list.leftRemainSale||'0'}}</p><p class="text_hide">{{$t("lang.yu")}}：{{list.rightRemainSale||'0'}}</p>
                </div>
                <!-- <span class="text_hide">ID：{{list5.customerNumber||'--'}}</span> -->
              </div>
              <div class="info_box" v-else @click.stop="goRegister(1,list2,list5)">
                <section v-show="!list2.customerName">{{$t("lang.leftSpace")}}</section>
                <section v-show="list2.customerName">{{$t("lang.teamRegbtn")}}</section>
              </div>
            </li>
            <li>
              <div class="info_box" v-if="list6.customerName" @click="showPopup(list6)">
                <span class="text_hide col_red" v-if="list6.customerStatus!=4">{{list6.customerName}} {{list6.levelName}}</span>
                <span class="text_hide " v-if="list6.customerStatus==4">{{list6.customerName}} {{list6.levelName}}</span>
                <!-- <span class="text_hide">手机号：{{list6.customerPhone||'手机号'}}</span> -->
                <span class="text_hide">{{$t("lang.Trname")}}：{{list6.trueName||MemberNmme}}</span>
                <div class="pflex">
                  <p class="text_hide">{{$t("lang.ttotal")}}：{{list.leftTotalSale||'0'}}</p><p class="text_hide">{{$t("lang.ttotal")}}：{{list.rightTotalSale||'0'}}</p>
                </div>
                <div class="pflex">
                  <p class="text_hide">{{$t("lang.yu")}}：{{list.leftRemainSale||'0'}}</p><p class="text_hide">{{$t("lang.yu")}}：{{list.rightRemainSale||'0'}}</p>
                </div>
                <!-- <span class="text_hide">ID：{{list6.customerNumber||'--'}}</span> -->
              </div>
              <div class="info_box" v-else @click.stop="goRegister(2,list2,list5)">
                <section v-show="!list2.customerName">{{$t("lang.rightSpace")}}</section>
                <section v-show="list2.customerName">
                  <i v-show="list5.customerName">{{$t("lang.teamRegbtn")}}</i>
                  <i v-show="!list5.customerName">{{$t("lang.rightSpace")}}</i>
                </section>
              </div>
            </li>
          </ul>
        </div>
      
        <van-popup class="fans_popup" v-model="fansPopup"  position="right" :overlay="false">
          <my-header :showBack="true" :title="$t('lang.Themembercenter')"   :rightText="$t('lang.memnerTeam')" :showRight="true" @rightAction="goBack();initFans(popupData.id)"></my-header>
          <div class="fans_popup_box">
            <div class="fans_popup_top">
              <!-- <img src="../../assets/img/my/my_bg.png" alt=""> -->
              <div class="fans_popup_top_box">
                <label>
                  <img :src="popupData.customerHead" alt="">
                  <span>{{popupData.customerName}}</span>
                </label>
              </div>
            </div>
            <div class="fans_info">
              <table>
                <tr>
                  <td colspan="3">{{$t("lang.PhoneTel")}}：{{popupData.customerPhone}}</td>
                </tr>
                <tr>
                  <td colspan="3">{{$t("lang.dengjiTxt")}}：{{popupData.levelName}}</td>
                </tr>
                <tr>
                  <td colspan="3">{{$t("lang.andinterest")}}：{{popupData.useMoney}}</td>
                </tr>
                 <tr>
                  <td>{{$t("lang.leftAlltoal")}}</td>
                 
                  <td>{{$t("lang.rightAlltoal")}}</td>
                </tr>
                <tr>
                  <td>{{popupData.leftTotalSale}}</td>
                 
                  <td>{{popupData.rightTotalSale}}</td>
                </tr>
               
              </table>
            </div>
          </div>
        </van-popup>
      </div>
    </div>
</template>

<script>
import { Toast } from "vant";
import header from "@/components/header";
export default {
  components: {
    "my-header": header
  }, 
  name: "myTeam",
  data() {
    return {
      searchValue: "",
      parentId: "",
      parName:"",
      list: {},
      list1: {},
      list2: {},
      list3: {},
      list4: {},
      list5: {},
      list6: {},
      fansPopup: false,
      Membership:this.$t('lang.lv'),
      MemberNmme:'--',
      popupData: {
        customerName: ""
      }
    };
  },
  created(){
    //处理物理键返回关闭messageBox    
    if(this.$route.fullPath.indexOf('?')!=-1){
      this.goBack();
    }
    this.initFans(0);
  },
  watch:{
    '$route'(val,oldval){
      //处理物理键返回关闭messageBox      
      if(oldval.fullPath.indexOf('?')!=-1){
        this.fansPopup = false;
      }
    },
  },
  methods: {
    onKeySearch(){
      if (event.keyCode == '13') {
        event.preventDefault();
        this.onSearch()
      }
    },
    onSearch() {
      
      if (this.searchValue) {
        this.$ajax(this.$api.selectFans, { searchValue: this.searchValue }).then(res => {
          console.log(res,222)
        if (res.code === 0) {
          this.list = {};
          this.list1 = {};
          this.list2 = {};
          this.list3 = {};
          this.list4 = {};
          this.list5 = {};
          this.list6 = {};

          this.list = res.msg;
          console.log(this.list)
          this.parentId = res.msg.id;
          // this.parName= res.msg.customerName;//新加
          // this.customerName= res.msg.customerName;//新加
          this.list1=this.list.leftChild;
          this.list2 = this.list.rightChild;
          console.log(this.list2);
          
          // 第二层 左一
          if(JSON.stringify(this.list1)== "{}"){
            this.list3={};
            this.list4={};
          }else{
            this.list3 = this.list1.leftChild;
            // console.log(this.list3,288);
            
            this.list4 = this.list1.rightChild;
          }

          // 第二层 右
          if(JSON.stringify(this.list2) == "{}"){
            this.list5={};
            this.list6={};
          }else{
            console.log("565656565");
            this.list5 = this.list2.leftChild;
            this.list6 = this.list2.rightChild;
          }

        }else{
          Toast({ message: res.msg, position: "bottom" });
        }
        });
      } else {
        Toast({ message: this.$t('lang.plaseInputSerch'), position: "bottom" });
      }
    },
    showPopup(data) {
      this.parentId = data.parentId;
      this.initFans(data.id)
      // //处理物理键返回关闭popup
      // if(window.location.href.indexOf('?fansPopup')==-1){
      //   window.location.href = window.location.href+'?fansPopup';
      // }
      // this.popupData = data;
      // this.fansPopup = true;
    },
    goRegister(type, data ,left) {
     // console.log(data)
      if (data.customerPhone) {
        if(type==2&&!left.customerPhone){
          return;
        }
        this.$router.push("/register/" + JSON.stringify({recommendPhone:this.list.customerName,parentPhone:data.customerName}));
      }
    },
    initFans(id) {
      this.fansPopup = false;
      this.$ajax(this.$api.selectFans, { id: id ,searchValue: this.values}).then(res => {
        //console.log(res,1111111)
        if (res.code === 0) {
          this.list = {};
          this.list1 = {};
          this.list2 = {};
          this.list3 = {};
          this.list4 = {};
          this.list5 = {};
          this.list6 = {};

          this.list = res.msg;
          console.log(this.list,"我")
          this.parentId = res.msg.parentId;
          this.parName= res.msg.parentNumber;//新加
          this.list1=this.list.leftChild?this.list.leftChild:{};
          this.list2 = this.list.rightChild?this.list.rightChild:{};
          //console.log(this.list2);
          
          // 第二层 左一
          if(JSON.stringify(this.list1)== "{}"){
            this.list3={};
            this.list4={};
          }else{
            //console.log(this.list1,356)
          
            this.list3 = this.list1.leftChild?this.list1.leftChild:{};
            
           
            //console.log(this.list3,357);
            
            //this.list4 = this.list1.rightChild?this.list1.leftChild:{};
            //this.list4="{}";
          }

          // 第二层 右
          if(JSON.stringify(this.list2) == "{}"){
            this.list5={};
            this.list6={};
          }else{
            //this.list5 = this.list2.leftChild;
            //this.list6 = this.list2.rightChild;
          }

        }
      });
    },
    toUPFans(parName){
      this.fansPopup = false;
      this.$ajax(this.$api.selectFans, {searchValue:this.parName}).then(res => {
        // console.log(res)
        if (res.code === 0) {
          this.list = {};
          this.list1 = {};
          this.list2 = {};
          this.list3 = {};
          this.list4 = {};
          this.list5 = {};
          this.list6 = {};

          this.list = res.msg;
          console.log(this.list)
          this.parentId = res.msg.parentId;
          this.parName= res.msg.parentNumber;//新加
          this.list1=this.list.leftChild;
          this.list2 = this.list.rightChild;
          console.log(this.list2);
          
          // 第二层 左一
          if(JSON.stringify(this.list1)== "{}"){
            this.list3={};
            this.list4={};
          }else{
            //this.list3 = this.list1.leftChild;
            //console.log(this.list3,401);
            
            //this.list4 = this.list1.rightChild;
          }

          // 第二层 右
          if(JSON.stringify(this.list2) == "{}"){
            this.list5={};
            this.list6={};
          }else{
            this.list5 = this.list2.leftChild;
            this.list6 = this.list2.rightChild;
          }

        }else{
          Toast({ message: res.msg, position: "bottom" });
        }
      });
    },
    getlist(){
      console.log(this.list,1)
      console.log(this.list1,2)
      console.log(this.list2,3)
      console.log(this.list3,4)
      console.log(this.list4,5)

      console.log(this.list5,6)
      console.log(this.list6,7)
    }
  }
};
</script>
<style lang="less" scoped>
.search_box {
  color: #666;
  margin: 10px 15px;
  padding: 10px 5px;
  display: flex;
  border-radius: 4px;
  background-color: #fff;
  border: 1px solid #eeeeee;
  form {
    flex: 1;
    input {
      width: 100%;
      border: none;
      height: 20px;
      line-height: 20px;
      background-color: #fff;
      color: #666;
    }
  }
  i {
    flex: 1;
    max-width: 30px;
    text-align: center;
    font-size: 20px;
    color: #0258c2;
    height: 20px;
    line-height: 20px;
  }
  span{
    flex: 1;
    max-width: 40px;
    text-align: center;
    height: 20px;
    line-height: 20px;
    color: #0258c2;
  }
}

.my_fans_tree {
  width: 100%;
  position: relative;
}
.line_1 {
  height: 130px;
  width: 2px;
  border-right: 2px #ccc solid;
  box-sizing: border-box;
  margin-left: 50%;
}
.line_2 {
  width: 55%;
  margin-left: 22.5%;
  height: 150px;
  border: 2px #ccc solid;
  border-bottom: none;
  box-sizing: border-box;
  border-radius: 20px 20px 0 0;
}
.line_3 {
  width: 50%;
}
.line_3 span {
  display: block;
  height: 40px;
  width: 50%;
  border: 2px #ccc solid;
  margin-left: 20%;
  border-bottom: none;
  box-sizing: border-box;
  border-radius: 20px 20px 0 0;
}
.line_4 {
  width: 45%;
  margin-left: 52%;
  margin-top: -40px;
}
.line_4 span {
  display: block;
  height: 40px;
  width: 50%;
  border: 2px #ccc solid;
  margin-left: 30%;
  border-bottom: none;
  box-sizing: border-box;
  border-radius: 20px 20px 0 0;
}
.my_fans_tree ul {
  margin: 0;
  padding: 0;
}

.my_fans_tree li {
  list-style: none;
  line-height: 20px;
}
.my_fans_tree li:nth-child(1) {
  position: absolute;
  top: 0;
  width: 70%;
  margin-left: 15%;
  text-align: center;
}
.my_fans_tree li:nth-child(2) {
  position: absolute;
  top: 150px;
  width: 45%;
  margin-left: 3%;
  text-align: center;
}
.my_fans_tree li:nth-child(3) {
  position: absolute;
  top: 150px;
  width: 45%;
  right: 3%;
  text-align: center;
}
.my_fans_tree li:nth-child(4) {
  position: absolute;
  top: 300px;
  width: 24%;
  text-align: center;
  margin-left: 0.5%;
}
.my_fans_tree li:nth-child(5) {
  position: absolute;
  top: 300px;
  width: 24%;
  left: 25.5%;
  text-align: center;
}
.my_fans_tree li:nth-child(6) {
  position: absolute;
  top: 300px;
  width: 24%;
  left: 50.5%;
  text-align: center;
}
.my_fans_tree li:nth-child(7) {
  position: absolute;
  top: 300px;
  width: 24%;
  left: 75.5%;
  text-align: center;
}
.info_box {
  display: inline-block;
  text-align: left;
  min-height: 112px;
  width: 100%;
  background-color: #fff;
  color: #666;
  border-radius: 4px;
}
.info_box section{
  line-height: 112px;
  text-align: center;
}
.info_box .col_red{background: #fd8290!important;}
.info_box span:first-child {
  padding: 2px 5px;
  display: block;
  font-size: 14px;
  line-height: 28px;
  // border: 1px #ccc solid;
  border-bottom: none;
  text-align: center;
  background: #0258c2;
  color: #fff;
  border-radius: 4px 4px 0 0;
}
.info_box .pflex{display: flex;border-bottom: 1px solid #eeeeee;}
.info_box .pflex p{width: 60%;text-align: center;}
.info_box span {
  background: #fff;
  line-height: 26px;
  color: #666;
  font-size: 12px;
  box-sizing: border-box;
  text-align: center;
  display: block;
  border-bottom: 1px #eee solid;
}
.info_box{
  label{
    line-height: 26px;
    font-size: 12px;
    display: flex;
    border-bottom: 1px #eee solid;
    &:last-child{
      border-bottom: none;
    }
    em{
      flex: 1;
      text-align: center;
      &:nth-child(2){
       
        border-left: 1px #eee solid;
       
      }
    }
  }
}

.info_box_popup{
  margin-bottom: 20px;
}

.info_box_popup span {
  display: flex;
  padding: 0;
  background: #fff;
  border: 1px solid #ccc;
  line-height: 30px;
  color: #666;
  font-size: 12px;
}
.info_box_popup span:first-child{
  border-bottom: none;
}
.info_box_popup em {
  flex: 1;
  display: block;
  text-align: center;
  font-style: normal;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.info_box_popup i {
  display: block;
  padding: 0 5px;
  border-left: 1px #ccc solid;
  border-right: 1px #ccc solid;
  font-style: normal;
}

.fans_popup{
  width: 100%;
  height: 100%;
  .fans_popup_box{
    background: #fff;
  }
  .fans_popup_top{
    position: relative;
    .fans_popup_top_box{
      position: absolute;
      top: 0;
      display: flex;
      align-items: center;
      width: 100%;
      height: 100%;
      label{
        display: block;
        width: 80%;
        margin: auto;
        text-align: center;
        span{
          display: block;
          margin-top: 10px;
          font-size: 16px;
        }
        em{
          display: block;
          margin-top: 10px;
          opacity: 0.7;
        }
      }
      img{
        width: 18vw;
        height: 18vw;
        border-radius: 50%;
      }
    }
  }
  .fans_info{
    table{
      width: 100%;
      text-align: center;
      line-height: 40px;
      margin-top: 20px;
      border-collapse: collapse;
      padding: 2px;
      border: 1px solid #f1f1f1;
      tr {
        border: 1px solid #f1f1f1;
        td{
           border: 1px solid #f1f1f1;
        }
      }
    }
    
  }
}
</style>


